<!--场景应用金融产品-查看-->
<template>
    <div class="financialProductView">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/financialProduct' }">场景应用金融产品</el-breadcrumb-item>
            <el-breadcrumb-item>查看</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="ruleForm" label-width="150px" class="demo-ruleForm">
            <el-form-item label="场景金融名称：" required>
                {{ruleForm.financialSceneName}}
            </el-form-item>
            <el-form-item label="业务场景：" required>
                {{ruleForm.businessScene==1?'新房':''}}
            </el-form-item>
            <el-form-item label="金融产品：" required>
                {{ruleForm.financialProductName}}
            </el-form-item>
            <el-form-item label="楼盘：" required>
                <div v-for="(x,index) in ruleForm.sceneDevs" :key="index" class="dev-item">
                    {{x.cityName}}-{{x.devName}}
                </div>
            </el-form-item>
            <el-form-item label="授信额度：" required>
                {{ruleForm.lineofCredit}}&nbsp;元
            </el-form-item>
            <el-form-item label="可用周期：" required>
                {{ruleForm.availableCycle}}&nbsp;天
            </el-form-item>
            <el-form-item label="执行利率：" required>
                {{ruleForm.interestRate}}&nbsp;%
            </el-form-item>
            <el-form-item label="适用角色：" required>
                {{ruleForm.applyRole | shareInterestRateFilter}}
            </el-form-item>
            <el-form-item label="利率承担方式：" required>
                {{ruleForm.interestRateBearingMethod==1?'单独承担':'多方承担'}}
            </el-form-item>
            <el-form-item label="好生活承担：" required
                          v-if="ruleForm.interestRateBearingMethod==1"
            >
                {{ruleForm.sceneRates[0].shareInterestRate}}&nbsp;%
            </el-form-item>
            <el-form-item label="" v-if="ruleForm.interestRateBearingMethod==2" required>
                <div v-for="item in ruleForm.sceneRates" class="otherRate">
                    <el-checkbox v-model="item.able"></el-checkbox>&nbsp;
                    <span>{{item.applyRole | shareInterestRateFilter}}利率</span>
                    {{item.shareInterestRate}}&nbsp;%
                </div>
            </el-form-item>
            <el-form-item>
                <el-button @click="pageBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    name:"financialProductView",
    created() {
        this.$axios.post('/financialCenter/financeProduct/scene/detail',{sceneId: this.$route.query.id}).then(res=>{
            this.ruleForm = res.list[0]
        })
    },
    mounted() {},
    components: {},
    filters: {
        shareInterestRateFilter(val){
            if(val==1){
                return '好生活'
            }else if(val==2){
                return '经纪人'
            }else if(val==3){
                return '经纪公司'
            }else if(val==4){
                return '网络推客'
            }else if(val==5){
                return '开发商'
            }else if(val==6){
                return '合伙人'
            }
        },
    },
    data() {
        return {
            productList: [],
            ruleForm:{
                financialSceneName:'',// 场景金融名称
                businessScene:'1', // 业务场景
                financialProductId:'', // 金融产品
                lineofCredit:10000, // 授信额度
                availableCycle: '',// 可用周期
                interestRate:'',// 执行利率
                applyRole: '',
                interestRateBearingMethod: '', // 利率承担方式
                sceneDevs:[], // 楼盘
            },
        }
    },
    methods: {
        loadProductList(){

        },

        pageBack(){
            this.$router.back()
        },
    },
    computed: {}
}
</script>
<style lang="stylus" scoped>
    .financialProductView {
        .dev-item {
            background: #ccc;
            float: left;
            margin: 0 15px 8px 0;
            position: relative;
            border-radius: 4px;
            padding: 0 10px;
        }
        .dev-clear{
            float: left;
            background: #f00;
            margin: 0 15px 8px 0;
            padding:0 5px;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
        }
        .otherRate{
            display: flex;
            margin-bottom: 20px;
            span{
                display: inline-block;
                width: 100px;
            }
        }
    }
</style>
<style>
    .financialProductView .el-form-item{
        margin-bottom: 0;
    }
</style>
